<template>
    <div><a-table :columns="columns" :data-source="data" :customHeaderRow="customHeaderRowHandler" /></div>
</template>

<script setup lang='ts'>
import { ref } from 'vue';


const columns = [
    {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
        // customHeaderCell: (column) => {
        //     return {
        //         style: {
        //             backgroundColor: 'red'
        //         }
        //     }
        // }
    },
    {
        title: '年龄',
        dataIndex: 'age',
        key: 'age'
    },
    {
        title: '地址',
        dataIndex: 'address',
        key: 'address'
    },
]
let data = [
    {
        name: 'xiaoming',
        age: 18,
        address: 'shandong',
    },
    {
        name: 'xiaoming',
        age: 18,
        address: 'shandong',
    },
    {
        name: 'xiaoming',
        age: 18,
        address: 'shandong',
    },
]
const customHeaderRowHandler = (column) => {
    if (column.title === '姓名') {
        return {
          class: 'red-header'
        };
      } else if (column.title === '年龄') {
        return {
          class: 'blue-header'
        };
      } else {
        return {};
      }
    
}
</script>

<style lang="less" scoped>
th.testClass {
    background-color: red;
}

.red-header {
  background-color: red;
}

.blue-header {
  background-color: blue;
}
</style>